import React from 'react'
import { Link } from 'react-router'
import WelcomeActions from '../actions/welcome'
import WelcomeStore from '../stores/welcome'
import { Drag, DragItem } from '../../../components/drag'
import alt from '../../alt'
import styles from '../styles/welcome'
import cx from "classnames";

export default React.createClass({

	contextTypes: {
		router: React.PropTypes.object,
	},

	getInitialState: function() {
		return WelcomeStore.getState();
	},

	componentDidMount: function() {

		WelcomeStore.listen(this.onChange);
	},

	componentWillUnmount: function() {
		WelcomeStore.unlisten(this.onChange);
		alt.recycle(WelcomeStore);
	},

	onChange: function(state) {
		this.setState(state);
	},
	onDragStart: function(id) {

		this.setState({
			activeId: id
		})
	},
	dragTo: function(id) {

		let {
			igData,
			activeId
		} = this.state;
		let pidx;
		igData.imgLt.forEach(function(x, idx) {

			if(x.id == activeId) {
				pidx = idx;
			}

		});
		let task = igData.imgLt[pidx];
		if(task.cat !== id) {
			task.cat = id;
			this.setState({
				igData: igData
			})
		}
		this.cancelSelect();
	},

	cancelSelect: function() {
		this.setState({
			activeId: null
		})
	},

	changeCat: function(id) {
		this.setState({
			curcat: id
		})
	},
	changeLab: function(id) {
		this.setState({
			curcs: id
		})
	},
	modCat: function(id, cat) {
		let igData = this.state.igData;
		let opidx;
		igData.imgLt.forEach((x, idx) => {

			if(x.id == id) {
				opidx = idx;
			}
		})
		igData.imgLt[opidx].cat = cat;
		this.setState({
			igData: igData
		})
	},
	render: function() {
		let igData = this.state.igData;
		let cat = igData.shLt[0].catLts;
		let timeLt = igData.imgLt;
		let {
			curcs,
			curcat
		} = this.state;
		let imgDataLt; //curcs 分类/创建时间  curcat 选择的子类 imgLt 展示的图片区域
		timeLt = timeLt.sort(function(a, b) {
			return a.date < b.date ? 1 : -1;
		})

		let shLab = igData.shLt.map(x => {
			return(
				<li key={x.id} className={x.id==curcs?'cur':''}><span  onClick={() => this.changeLab(x.id)} >{x.name}</span></li>
			)
		})
		let catLt = cat.map((x, idx) => {

			return(
				<li key={x.id}  className={x.id==curcat?'catcur':''}><span onClick={() => this.changeCat(x.id)}   >{x.name}</span></li>
			)
		})
		if(curcs == 0) {

			imgDataLt = igData.imgLt.filter((x) => {
				return curcat === 0 || x.cat == curcat
			})
		} else {
			imgDataLt = timeLt;
		}
		let touchLt = [],
			mInfo = [];
		let {
			activeId
		} = this.state;
		let {
			onDragStart,
			onDragEnd,
			cancelSelect
		} = this;

		let imgLt = imgDataLt.map((x, idx) => {

			let mct = cat.map(d => {

				if(d.id > 0 && d.id != x.cat) {
					return(<p  onClick={() => this.modCat(x.id,d.id)} key={d.id}>{d.name}</p>)
				} else {
					return;
				}
			})

			return(
				<li key={x.id} >
               <p>{x.name}</p>
               <p>{x.date}</p>
                <div className={curcs==0?'mod':'hide'}>修改
                 <div className="mct"  >
                	{mct}
               	 </div>
                </div>
      
               </li>
			)
		})

		return(
			<div id="main">
		 <div className="touch">
			 	<ul className="labst">
				{	
					cat.filter((t, idx) => idx > 0).map(t =>
						<Drag
							id={t.id} 
							key={t.id} 
							status={t.id}
							name={t.name} 
							dragTo={()=>this.dragTo(t.id)}
							canDragIn={ activeId !== null && igData.imgLt[activeId].cat !== t.id}>
							{
								igData.imgLt.filter(i => i.cat === t.id).map(x =>
									<DragItem
									key={x.id}
									id={x.id}
									name={x.name}
									onDragStart={()=>{onDragStart(x.id)}}
									onDragEnd={cancelSelect} />
									)
							}
						</Drag>
					)
				}
						
			 	</ul>
			 </div>
		 	<div className="top">
		 		<ul className="cs" >
		 			{shLab}
		 		</ul>
	 			<ul className={curcs==0?'cat':'hide'}>
				 		{catLt}
				 </ul>
		 	</div>

		 	<ul className="info">
		 		{imgLt}
		 	</ul>
		 	
		 	
			 
		 </div>
		);
	}
})